<template>
  <div class="dashboard-container">
    <div class="header">
      <div class="title">校园电脑维修智能管理平台</div>
      <div class="time">{{ currentTime }}</div>
    </div>
    
    <div class="stats-cards">
      <div class="stat-card" v-for="(stat, index) in stats" :key="index">
        <div class="stat-icon">
          <i :class="stat.icon"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </div>

    <div class="charts-container">
      <div class="chart-wrapper">
        <div class="chart-title">工单趋势</div>
        <div ref="trendChart" class="chart"></div>
      </div>
      
      <div class="chart-wrapper">
        <div class="chart-title">故障类型分布</div>
        <div ref="pieChart" class="chart"></div>
      </div>
      
      <div class="chart-wrapper">
        <div class="chart-title">工单状态</div>
        <div ref="statusChart" class="chart"></div>
      </div>
      
      <div class="chart-wrapper">
        <div class="chart-title">维修人员效率分析</div>
        <div ref="performanceChart" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'

export default {
  name: 'Home',
  data() {
    return {
      currentTime: '',
      stats: [
        { label: '总工单', value: '150单', icon: 'el-icon-document' },
        { label: '活跃工单', value: '30单', icon: 'el-icon-loading' },
        { label: '维修人员', value: '4人', icon: 'el-icon-user' },
        { label: '满意度', value: '91%', icon: 'el-icon-star-on' }
      ],
      charts: {}
    }
  },
  mounted() {
    this.initCharts()
    this.updateTime()
    setInterval(this.updateTime, 1000)
  },
  methods: {
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN', { 
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    initCharts() {
      // 工单趋势图
      this.charts.trend = echarts.init(this.$refs.trendChart)
      this.charts.trend.setOption({
        backgroundColor: 'transparent',
        grid: { top: 40, right: 40, bottom: 40, left: 40 },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: { lineStyle: { color: '#8392A5' } }
        },
        yAxis: {
          type: 'value',
          axisLine: { lineStyle: { color: '#8392A5' } }
        },
        series: [{
          data: [150, 180, 120, 140, 160, 130, 80],
          type: 'line',
          smooth: true,
          symbolSize: 8,
          lineStyle: { width: 4 },
          areaStyle: {
            opacity: 0.3,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgb(128, 255, 165)' },
              { offset: 1, color: 'rgb(1, 191, 236)' }
            ])
          }
        }]
      })

      // 故障类型饼图
      this.charts.pie = echarts.init(this.$refs.pieChart)
      this.charts.pie.setOption({
        backgroundColor: 'transparent',
        tooltip: { trigger: 'item' },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          data: [
            { value: 40, name: '硬件故障' },
            { value: 30, name: '软件故障' },
            { value: 30, name: '其他问题' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      })

      // 工单状态图
      this.charts.status = echarts.init(this.$refs.statusChart)
      this.charts.status.setOption({
        backgroundColor: 'transparent',
        series: [{
          type: 'gauge',
          progress: { show: true },
          axisLine: {
            lineStyle: { width: 30 }
          },
          pointer: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: { valueAnimation: true, fontSize: 30 },
          data: [{ value: 70, name: '完成率' }]
        }]
      })

      // 维修人员效率分析
      this.charts.performance = echarts.init(this.$refs.performanceChart)
      this.charts.performance.setOption({
        backgroundColor: 'transparent',
        grid: { top: 40, right: 100, bottom: 40, left: 100 },
        xAxis: { type: 'value' },
        yAxis: {
          type: 'category',
          data: ['张工', '李工', '王工', '赵工']
        },
        series: [{
          type: 'bar',
          data: [120, 145, 98, 88],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          }
        }]
      })
    }
  },
  beforeUnmount() {
    Object.values(this.charts).forEach(chart => chart?.dispose())
  }
}
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(135deg, #1a1f3c 0%, #152233 100%);
  color: #fff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(45deg, #36d1dc, #5b86e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glow 2s ease-in-out infinite alternate;
}

.time {
  font-size: 18px;
  color: #8392A5;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  font-size: 24px;
  margin-right: 15px;
  color: #5b86e5;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  color: #8392A5;
}

.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.chart-wrapper {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  height: 350px;
}

.chart-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #8392A5;
}

.chart {
  height: calc(100% - 40px);
  width: 100%;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #36d1dc, 0 0 20px #36d1dc, 0 0 30px #36d1dc;
  }
  to {
    text-shadow: 0 0 20px #5b86e5, 0 0 30px #5b86e5, 0 0 40px #5b86e5;
  }
}
</style>
